<template xmlns="http://www.w3.org/1999/html">
  <div class="collection">

    <!-- 弹窗, 新增 / 修改 -->
    <address-add-update style="display: block; z-index: 99999" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getOrderConfirm"></address-add-update>

    <div class="settlement" style="padding-top: 20px">
      <!--logo图片-->
      <div class="top-1">
        <img :src="require('@/assets/logo/logoH.png')" class="img1" />
        <span>结算页</span>
        <!--右侧绿色-->
        <div style="margin-left: 600px;">
          <el-steps :active="2" align-center space="400px">
            <el-step title="1.我的购物车" icon="el-icon-shopping-cart-1"></el-step>
            <el-step title="2.填写核对订单信息" icon="el-icon-edit"></el-step>
            <el-step title="3.成功提交订单" icon="el-icon-success"></el-step>
          </el-steps>
        </div>
<!--        <img :src="require('@/assets/settlement/08.png')" class="img2" />-->
      </div>

      <p class="p1">填写并核对订单信息</p>
      <div class="section">
        <!--收货人信息-->
        <div class="top-2">
          <span>收货人信息</span>
          <span class="addAddressButton" @click="addOrUpdateHandle()">新增收货地址</span>
        </div>

        <!--地址-->
        <div class="top-3" v-show="addressShow">
          <p style="position: relative;display: inline-block">
            {{ addressTrue.tag.length > 0 ? addressTrue.tag : addressTrue.name + "   " + addressTrue.province }}
            <img style="display: block;position: absolute;width: 12px;height: 12px;right: 0;bottom: 0;" :src="require('@/assets/settlement/true.png')">
          </p>
          <span style="width: 800px;">
            <span style="margin-right: 10px;">{{ addressTrue.name }}</span>
            <span>{{ addressTrue.province }}</span>
            <span>{{ addressTrue.city }}</span>
            <span>{{ addressTrue.region }}</span>
            <span>{{ addressTrue.detailAddress }}</span>
            <span>{{ addressTrue.phone }}</span>
            <span v-if="addressTrue.defaultStatus === 1" style="display: inline-block;color: white;background-color: rgb(60,133,39);margin-left: 10px;height: 20px;width: 60px;line-height: 20px;text-align: center">
              默认地址
            </span>
            <a class="click" style="display: inline-block;font-size: 13px;float: right" @click="addOrUpdateHandle(addressTrue.id)">修改</a>
            <a class="click" v-if="addressTrue.defaultStatus !== 1" style="display: inline-block;font-size: 13px;float: right;margin-right: 10px;">设为默认地址</a>
          </span>
        </div>
        <el-alert
          v-show="!addressShow"
          title="请添加收获地址"
          type="warning"
          style="width: 1240px; margin-left: 30px; height: 30px; padding-left: 20px; color: #ffba00"
          :closable="false"
          show-icon>
        </el-alert>

        <div v-show="moreAddress">
          <div class="hh1"/>
          <!--********************************************************************************************-->
          <!--谷粒学院自提-->
          <div class="top-4">
            <p>MaxLen 自提</p>
            <p>省运费·无续重·随时取</p>
            <p class="xiang">详情</p>
          </div>

          <!--地址-->
          <div class="top-5" v-for="item in addressFalse" :key="item.id">
            <p  style="position: relative;display: inline-block" @click="changeAddress(item.id)">{{ item.tag.length > 0 ? item.tag : item.name + "   " + item.province }}</p>
            <span style="width: 800px;">
              <span style="margin-right: 10px;">{{ item.name }}</span>
              <span>{{ item.province }}</span>
              <span>{{ item.city }}</span>
              <span>{{ item.region }}</span>
              <span>{{ item.detailAddress }}</span>
              <span>{{ item.phone }}</span>
              <span v-if="item.defaultStatus === 1" style="display: inline-block;color: white;background-color: rgb(60,133,39);margin-left: 10px;height: 20px;width: 60px;line-height: 20px;text-align: center">
                默认地址
              </span>
              <a class="click" style="display: inline-block;font-size: 13px;float: right" @click="deleteHandle(item.id)">删除</a>
              <a class="click" style="display: inline-block;font-size: 13px;float: right; margin-right: 10px;" @click="addOrUpdateHandle(item.id)">修改</a>
              <a class="click" v-if="item.defaultStatus !== 1" style="display: inline-block;font-size: 13px;float: right;margin-right: 20px;" @click="setDefaultStatusHandle(item.id)">设为默认地址</a>
          </span>
          </div>
        </div>
        <p class="p2" @click="moreAddress = !moreAddress" v-show="addressFalse.length > 0">
          <!--          :class="moreAddress ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"-->
          {{ moreAddress ? '收起地址' : '更多地址' }}
        </p>



        <div class="hh1" />

        <!--支付方式-->
        <h4 class="h4">支付方式</h4>

        <div class="top-6">
          <p>货到付款</p>
          <p style="position: relative;display: inline-block">
            <span>惠</span>在线支付
            <img style="display: block;position: absolute;width: 12px;height: 12px;right: 0;bottom: 0;" :src="require('@/assets/settlement/true.png')">
          </p>
        </div>
        <div class="hh1"></div>
        <!--送货清单-->
        <h4 class="h4" style="margin-top: 5px;">送货清单<span class="pushCart" @click="pushCart()">返回购物车</span></h4>

        <div class="top_1" v-for="item in list.items" :key="item.skuId">
          <div class="to_left">
            <h5><span class="peisong">配送方式</span><span class="dui"><img src="img/i_03.png"/> 对应商品</span></h5>
            <div class="box"  style="position: relative;display: inline-block">
              <span>MaxLen 快递</span>
              <img style="display: block;position: absolute;width: 12px;height: 12px;right: 0;bottom: 0;" :src="require('@/assets/settlement/true.png')">
            </div>
            <p class="biao">
              <span class="til">标 准 达 ：</span>
              <span class="con">预计 12月16日[今天] 15:00-19:00 送达</span>
              <a href="#">修改</a>
            </p>
<!--            <div class="updata-1">-->
<!--              <img :src="require('@/assets/settlement/im_06.png')" />-->
<!--              <span>京准达 标准达</span>-->
<!--              <span style="color: black;"> 配送服务全面升级</span>-->
<!--            </div>-->
            <div class="hh1"></div>
            <p class="tui">
<!--              <span class="til">退换无忧：</span>-->
              <span class="con">
<!--                    <input type="checkbox" />-->
<!--                    退换货补偿运费<span style="font-size: 14px;margin-left: 5px;color: red"> ￥0.50</span><br />-->
                  <span class="nul">7天内退货, 15天内换货, 可享1次上门取件服务</span>
                  </span>

              <div class="updata-2">
                <img :src="require('@/assets/settlement/im_11.png')" />
                <span>京准达运费大促（限自营中小件）</span>
              </div>
            </p>
            <p class="kg" style="color:#666666;margin-top: 15px;font-size: 14px;font-weight: bold">总重量 :<span style="color:#999999;font-size: 14px">{{ (item.weight * item.count).toString().substring(0, 4) }}kg</span></p>
          </div>
          <div class="to_right">
            <h5>商家：MaxLen 自营</h5>
<!--            <div><button>换购</button><span>已购满20.00元，再加49.90元，可返回购物车领取赠品</span></div>-->
            <!--图片-->
            <div class="yun1">
              <img :src="item.skuImg" class="yun"/>
              <div class="mi">
                <p>
                  <span
                    style="display: inline-block;width: 300px;height: 40px;line-height: 20px;float:left;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;"
                  >{{ item.skuTitle }}</span>
                  <span style="margin-left: 20px;display: inline-block;width: 130px;">
                    <span style="display: block;" v-if="item.count !== 0">原价:<span style="color: red;font-weight: bold;">￥{{ item.skuPrice }}.00</span></span>
                    <span style="display: block; margin-top: 5px;" v-if="item.seckillPrice && item.seckillCount">秒杀价:
                      <span style="color: red;font-weight: bold;">￥{{ item.seckillPrice }}.00</span></span>
                  </span>
                  <span style="margin-left: 40px; display: inline-block; width: 50px;">
                    <span style="display: block;" v-if="item.count !== 0"> x{{ item.count }} </span>
                    <span style="display: block;"  v-if="item.seckillPrice && item.seckillCount"> x{{ item.seckillCount }} </span>
                  </span>
                  <span style="margin-left: 20px;" :style=" item.hasStock ? {} : {color: 'red'}">{{ item.hasStock ? '有货' : '无货' }}</span></p>
                <p><span v-for="t in item.skuAttr" :key="t" style="margin-right: 50px;"><span style="font-weight: bold">{{ t.split(":")[0] }}：</span>{{ t.split(":")[1] }}</span><span>{{ item.weight }}kg</span></p>
                <p class="tui-1"><img :src="require('@/assets/settlement/i_07.png')" />支持7天无理由退货</p>
              </div>
            </div>

            <div class="hh1"></div>
<!--            <p>退换货补偿运费 <span class="money">￥ 0.50</span></p>-->
          </div>
        </div>

        <div class="bto">
          <div class="hh2"></div>
          <h4 class="float">发票信息</h4>
          <div class="note float"><img :src="require('@/assets/settlement/i_11.png')" /> <span>开企业抬头发票须填写纳税人识别号，以免影响报销</span></div>
          <ul style="clear: both;">
            <li>电子普通发票
<!--              <img src="img/i_14.png" />-->
            </li>
            <li>个人</li>
            <li>商品明细</li>
            <li>
              <a href="">修改</a>
            </li>
          </ul>
          <div class="hh3"></div>
          <h4 class="clear" @click="couponShow = !couponShow">使用优惠券与积分抵用<i style="margin-left: 10px;font-size: 16px;" :class="couponShow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i></h4>
          <div v-show="couponShow">
            <ul style="font-weight: bold; font-size: 16px;">
              <li class="red">优惠券</li>
              <li>积分</li>
            </ul>
            <div class="tuijian" style="clear: both;">
              <div v-for="item in coupon" :key="item.id" style="display: inline-block; margin-right: 30px;">
                <div :style="{border: item.useCoupon && item.use ? 'red 3px solid' : 'whitesmoke 3px solid'}">
                  <div style="width: 250px; height: 100px; padding: 18px;"
                       :style="{backgroundColor: item.use ? 'rgb(116,210,212)' : 'rgb(209,209,209)'}"
                       :class="item.use ? 'couponUse' : 'couponNoUse'"
                       @click="item.use ? useCouponButton(item.id) : null">
                    <span style="font-size: 30px; font-weight: bold; color: white">￥{{ item.amount }}</span>
                    <span style="margin-left: 10px; font-size: 15px; font-weight: bold; color: white">满{{ item.minPoint }}</span>
                    <div style="margin-top: 10px;">
                      <span style="font-size: 15px;" :style="{color: item.use ? 'white' : 'rgb(169,169,169)'}">有效期至 {{ renderTime(item.endTime) }}</span>
                    </div>
                  </div>

                  <div style="width: 250px; height: 45px; padding-left: 15px; padding-top: 12px;"
                       :style="{border: item.use ? 'rgb(116,210,212) 1px solid' : 'rgb(209,209,209) 1px solid',
                     color: item.use ? 'rgb(116,210,212)' : 'rgb(209,209,209)'}">
                    <span style="font-size: 15px;">[{{ item.couponName }}]</span>
                    <span style="font-size: 15px; margin-left: 10px;">[{{ item.useType === 0 ? '通用商品' : item.useType === 1 ? '指定分类' : '指定商品' }}]</span>
                  </div>
                </div>

                <div style="height: 50px;width: 250px;font-size: 15px;margin-top: 5px;" :style="{color: item.use ? 'whitesmoke' : 'rgb(169,169,169)'}">
                  <!--所结算商品中没有符合条件的商品-->
                  <i class="el-icon-warning-outline"></i>
                  {{ item.use ? '1' : item.priceDifference !== null ? '差'+ Math.abs(item.priceDifference) +'元可用该券' : '所结算商品中没有符合条件的商品' }}
                </div>
              </div>
            </div>

            <div style="background-color: #ebebeb; width: 1260px; height: 45px; margin-left: 20px; line-height: 45px;">
              <span style="font-size: 15px; font-weight: bold; margin-left: 10px;">金额抵用</span>
              <span style="font-size: 15px; font-weight: bold; margin-left: 5px; color: red">￥{{ couponPrice }}</span>
              <span v-show="couponCount > 0" style="font-size: 15px; margin-left: 15px;">使用优惠券 {{ couponCount }} 张</span>
            </div>

          </div>
          <div class="hh3"></div>
        </div>

        <div class="xia">
          <div class="qian">
            <p class="qian_y">
              <span>1</span>
              <span>件商品，总商品金额：</span>
              <span class="rmb">￥{{ list.totalPrice }}.00</span>
            </p>
<!--            <p class="qian_y">-->
<!--              <span>退换货补偿运费： </span>-->
<!--              <span class="rmb"> &nbsp ￥0.00</span>-->
<!--            </p>-->
            <p class="qian_y" v-show="couponPrice > 0">
              <span>优惠券抵扣： </span>
              <span class="rmb"> &nbsp -￥{{ couponPrice }}.00</span>
            </p>
<!--            <p class="qian_y">-->
<!--              <span>积分抵扣： </span>-->
<!--              <span class="rmb"> &nbsp ￥0.00</span>-->
<!--            </p>-->
            <p class="qian_y" v-show="fare > 0">
              <span>运费： </span>
              <span class="rmb"> &nbsp ￥{{ fare }}.00</span>
            </p>

          </div>

          <div class="yfze">
            <p class="yfze_a"><span class="z">应付总额：</span><span class="hq">￥{{ list.payPrice + fare - couponPrice }}.00</span></p>
            <p class="yfze_b" v-show="addressShow">寄送至： {{ addressTrue.province }} {{ addressTrue.city }} {{ addressTrue.region }} {{ addressTrue.detailAddress }}
              <span style="margin-left: 20px;font-size: 14px">收货人：{{ addressTrue.name }} {{ addressTrue.phone }}</span>
            </p>
            <p class="yfze_b" v-show="!addressShow">暂无收获地址</p>
          </div>
          <button class="tijiao" @click="submitOrder()">提交订单</button>
          </div>
      </div>

      <div style="height: 40px"></div>

    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/login-token";
import AddressAddUpdate from "@/components/Address-Add-Update";
import { deleteAddress, setDefaultStatus } from '@/api/member/member'

export default {
  name: "index",
  data() {
    return {
      moreAddress: false,
      fare: 0,
      title: '大萨达撒多撒多撒多撒多群无多无群多所付多所付',
      list: {
        address: []
      },
      addressTrue: {
        tag: ''
      },
      coupon: [],
      useCoupon: [],
      addressFalse: [],
      addressShow: false,
      couponShow: false,
      couponPrice: 0,
      couponCount: 0,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddressAddUpdate
  },
  created() {
    this.getOrderConfirm()
    this.getCoupon()
  },
  methods: {
    setDefaultStatusHandle(id){
      setDefaultStatus(id, getToken())
        .then(()=>{
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.getOrderConfirm()
        })
        .catch(()=>{})
    },
    // 删除
    deleteHandle(id) {
      deleteAddress(id)
        .then(()=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getOrderConfirm()
        })
        .catch(()=>{})
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    useCouponButton(id){
      this.coupon.forEach((item, index) => {
        if(item.id === id){
          const useCouponTemp = item
          useCouponTemp.useCoupon = !item.useCoupon
          this.$set(this.coupon, index, useCouponTemp)
          if(useCouponTemp.useCoupon){
            this.couponPrice += useCouponTemp.amount
            this.couponCount ++
            this.useCoupon.push(id)
          }else{
            this.couponPrice -= useCouponTemp.amount
            this.couponCount --
            this.$delete(this.useCoupon, this.useCoupon.indexOf(id))
          }
        }
      })
    },
    getCoupon(){
      this.$store.dispatch('coupon/coupon/getCouponByMemberId', getToken())
        .then(({data})=>{
          this.coupon = data
          data.forEach((item) => {
            if(item.use){
              this.useCoupon.push(item.id)
              this.couponShow = true
              if(item.useCoupon){
                this.couponPrice += item.amount
                this.couponCount ++
              }else{
                this.couponPrice -= item.amount
                this.couponCount --
              }
            }
          })
        })
        .catch(()=>{})
    },
    getOrderConfirm(){
      this.addressFalse = []
      this.$store.dispatch('order/order/getOrderConfirm')
        .then(({data})=>{
          console.log(data)
          this.list = data
          if(data.address.length <= 0){
            this.addressShow = false
          } else {
            this.list.address.forEach((item)=>{
              item.phone = item.phone.replace(item.phone.substring(3, item.phone.length - 4), '****')
              if(item.defaultStatus === 1){
                this.getFare(item.id)
                this.addressTrue = item
              }else{
                this.addressFalse.push(item)
              }
            })
            this.addressShow = true
          }
        })
        .catch(()=>{
          this.$router.push("/cart")
        })
    },
    changeAddress(id){
      this.getFare(id)
      let addressTrue = null
      let addressFalse = this.addressFalse.filter(function (element, index, array){
        if(element.id === id){
          addressTrue = element
          return false
        }else{
          return true
        }
      })
      addressFalse.unshift(this.addressTrue)
      this.addressFalse = addressFalse
      this.addressTrue = addressTrue
    },
    getFare(id){
      this.$store.dispatch('ware/ware/getFareByAddressId', id)
        .then((data)=>{
          this.fare = data.data.fare
        })
        .catch(()=>{})
    },
    pushCart(){
      this.$router.push({path: '/cart'})
    },
    submitOrder(){
      if(this.list.address.length > 0){
        this.$store.dispatch('order/order/setSubmitOrder', {
          addressId: this.addressTrue.id,
          orderToken: this.list.orderToken,
          payPrice: this.list.payPrice,
          couponId: this.useCoupon
        })
          .then((data)=>{
            this.$router.push({
              path: '/pay',
              query: {data: JSON.stringify(data.data)}
            })
          })
          .catch(()=>{})
      } else {
        this.$message({
          message: '请添加收获地址',
          type: 'warning'
        })
      }
    },
    renderTime(date) {
      const dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  }
}
</script>

<style lang="scss">
.couponUse {
  &:hover{
    cursor: pointer;
  }
}
.couponNoUse {
  &:hover{
    cursor: no-drop;
  }
}
.addAddressButton{
  &:hover{
    color: rgb(60, 133, 39);
    cursor: pointer;
  }
}
.el-step__icon{
  background-color: rgb(245, 245, 245);
}
.el-step__head.is-finish{
  color: rgb(60, 133, 39);
  border-color: rgb(60, 133, 39);
}
.el-step__title.is-finish{
  color: rgb(60, 133, 39);
}
.el-step__title.is-process{
  color: rgb(204,204,204);
}
.el-step__head.is-process{
  color: rgb(204,204,204);
}
</style>

<style lang="scss" scoped>

.click{
  color: cornflowerblue;

  &:hover{
    cursor: pointer;
    color: rgb(60,133,39);
  }
}

.collection {
  height: 100%;
  width: 100%;
  background-color: rgb(245, 245, 245);

  .settlement{
    width: 1300px;
    margin: 0 auto;
  }
}

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-size: 0.16rem; }

a {
  color: black; }

html {
  font-size: 100px; }

ul {
  list-style: none; }

img {
  vertical-align: middle; }

header {
  width: 100%;
  background: #E3E4E5;
  min-width: 990px; }

.header {
  width: 990px;
  margin: 0 auto;
  overflow: hidden; }

.header-left > li > a, .header-right > li > a {
  text-decoration: none;
  color: #999;
  font-size: 12px; }

.header-left > li > a:hover, .header-right > li > a:hover {
  color: red; }

.header-left > li:nth-of-type(2) > a:hover {
  color: #5C5452; }

.header-left > li:nth-of-type(2):hover {
  background: white; }

.header-left {
  float: left;
  overflow: hidden;
  vertical-align: middle; }

.header-right {
  float: right;
  overflow: hidden; }

.header-left > li, .header-right li {
  float: left;
  line-height: 30px;
  /*position: relative;*/
  padding: 0 8px;
  /*border: 1px solid red;*/
  z-index: 99999; }

.header-l-d {
  position: absolute;
  border: gainsboro 1px solid;
  z-index: 999999;
  overflow: hidden;
  margin-left: -11px;
  background: white;
  border-top: 0;
  display: none;
  width: 295px; }

.header-l-d ul {
  float: left; }

.header-l-d ul li {
  margin: 0 8px; }

.header-l-d ul li a {
  text-decoration: none;
  color: #5C5452;
  font-size: 12px;
  padding: 3px 5px;
  /*border: 1px solid red;*/ }

.header-l-d ul li a:hover {
  background: gainsboro;
  color: red; }

.header-left > li:nth-of-type(2) {
  padding: 0 25px 0 10px; }

.aa a {
  text-decoration: none;
  font-size: 12px;
  color: gray; }

.header-r-1 {
  display: none;
  overflow: hidden;
  position: absolute;
  background: white;
  border: 1px solid gainsboro;
  border-top: 0;
  margin-left: -8px;
  z-index: 999999;
  /*padding: 15px;*/ }

.header-r-1 div {
  border-bottom: 1px solid gainsboro;
  overflow: hidden;
  padding: 0 15px; }

.header-r-1 div:nth-of-type(3) {
  border: 0;
  padding: 15px; }

.header-right li:nth-of-type(6):hover, .header-right li:nth-of-type(12):hover, .header-right li:nth-of-type(14):hover {
  background: white; }

.header-r-1 div ol {
  float: left;
  width: 120px;
  line-height: 25px !important; }

.header-r-1 div h4 {
  font-size: 12px;
  color: #716d6d; }

.header-r-1 div h4 a:nth-of-type(2) {
  float: right; }

.header-r-1 div a:hover {
  color: red; }

.header-r-11 {
  width: 275px; }

.header-r-2 {
  width: 180px;
  min-width: 180px; }

.header-r-2 div {
  padding: 0; }

.header-r-2 div h4 {
  margin-left: 15px; }

.header-r-2 div ol {
  width: auto;
  margin: 0 15px; }

.header-r-4:hover {
  //background: url(../image/1fb04a3972bf9f4592bdb705fe497c08.png) no-repeat 25px 24px;
  z-index: 10; }

.h-r-1 {
  position: absolute;
  border: 1px solid gainsboro;
  margin-left: -135px;
  width: 190px;
  border-top: 0;
  display: none;
  z-index: 999999;
  background: white; }

.h-r-1 > div {
  padding: 10px 5px;
  overflow: hidden;
  line-height: 20px;
  border-bottom: 1px solid gainsboro; }

.h-r-1 > div p {
  font-size: 12px;
  color: red; }

.h-r-1img2 {
  vertical-align: middle; }

.h-r-1img {
  float: left;
  border: 2px solid gainsboro;
  padding: 1px;
  margin-right: 5px; }

.h-r-1img img {
  width: 72px; }

.header i {
  color: #C1C1C1; }

.spacer {
  padding: 0 !important;
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #C1C1C1;
  margin-top: 11px; }

.header-r-3 {
  width: 990px;
  margin-left: -850px;
  z-index: 999999;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 10px; }

.header-r-3 div {
  float: left;
  border: 0;
  padding: 0 0 0 15px;
  border-left: 1px solid gainsboro; }

.header-r-3 div:nth-of-type(3) {
  border-left: 1px solid gainsboro;
  padding: 0 0 0 15px; }

.header-r-3 div:nth-of-type(1) {
  border: 0; }

.header-r-3 div ol {
  width: 102px; }

nav {
  width: 1366px;
  height: 35px;
  background: #E3E4E5; }
nav ul {
  width: 1100px;
  height: 35px;
  margin: 0 155px; }
nav ul > li {
  line-height: 35px;
  float: left;
  margin: 0 5px;
  font-size: 12px;
  color: gray; }
nav ul > li:nth-child(2) {
  position: relative; }
nav img {
  margin-bottom: -6px; }
nav ul > li:nth-child(3) {
  margin-left: 198px; }
nav ul > li:hover {
  color: red; }
nav .p {
  width: 300px;
  height: 240px;
  background: white;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 999999; }
nav .p ol {
  padding-top: 6px; }
nav .p ol li {
  text-align: center;
  width: 300px;
  height: 33px; }
nav .p ol li p {
  width: 50px;
  height: 20px;
  float: left;
  line-height: 20px;
  cursor: pointer;
  font-size: 10px;
  color: gray;
  display: none; }
nav .p ol li p:hover {
  color: brown; }
nav .p ol li .hong {
  background: red;
  color: white; }

.img1 {
  height: 50px;
  width: 130px;
  position: absolute;
  top: 20px;
  float: left;
}

.top-1 span {
  font-size: 22px;
  position: absolute;
  top: 35px;
  left: 450px;
}

.img2 {
  margin-left: 220px;
  position: absolute;
  top: 65px; }

.p1 {
  color: dimgray;
  //text-indent: 160px;
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.section {
  width: 1300px;
  height: 100%;
  border: 1px solid #E3E4E5;
  //margin: 10px 160px;
}
.section .top-2 {
  display: flex;
  justify-content: space-between; }
.section .top-2 span {
  font-size: 14px;
  padding: 10px 25px; }
.section .top-2 span:first-child {
  font-weight: 600; }
.section .top-2 span:last-child {
  color: cornflowerblue; }
.section .top-3 {
  width: 1200px;
  height: 35px;
  line-height: 35px;
  //display: flex;
  align-items: center;
  margin-left: 50px; }
.section .top-3 p {
  width: 135px;
  height: 27px;
  border: 2px solid rgb(60, 133, 39);
  line-height: 27px;
  font-size: 12px;
  text-align: center;
  color: dimgray; }
.section .top-3 span {
  font-size: 13px;
  color: gray;
  margin-left: 5px; }
.section .p2 {
  font-size: 10px;
  color: dimgray;
  text-indent: 50px;
  margin-top: 8px;
  width: 100px;

  &:hover{
    cursor: pointer;
    color: rgb(60,133,39);
  }
}
.section .hh1 {
  width: 96%;
  height: 1px;
  margin: 12px 30px;
  background: #E3E4E5; }
.section .top-4 {
  display: flex;
  margin-left: 50px; }
.section .top-4 p:first-child {
  width: 93px;
  height: 20px;
  background-color: rgb(60,133,39);
  border-radius: 5px;
  text-align: center;
  color: white;
  line-height: 20px;
  font-size: 12px; }
.section .top-4 p:nth-child(2) {
  color: gray;
  font-size: 13px;
  text-indent: 10px;
  line-height: 20px;
}
.section .top-4 p:nth-child(3) {
  color: blue;
  font-size: 14px;
  text-indent: 10px; }
.section .top-4 .xiang:hover {
  color: red; }
.section .top-5 {
  width: 1200px;
  height: 35px;
  line-height: 35px;
  //display: flex;
  align-items: center;
  margin-left: 50px;
  margin-top: 12px; }
.section .top-5 p {
  width: 135px;
  height: 27px;
  border: 2px solid #E3E4E5;
  line-height: 27px;
  font-size: 12px;
  text-align: center;
  color: dimgray;
}
.section .top-5 p:hover {
  cursor: pointer;
  border: 2px solid rgb(60,133,39);
}
.section .top-5 span {
  font-size: 13px;
  color: gray;
  margin-left: 5px;
}
.section .top-5 .xiu:hover {
  color: red; }
.section .top-5 img {
  margin-left: 30px; }
.section .top-5 .p3 {
  width: 55px;
  border: 1px solid red;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: red;
  margin-left: 10px; }
.section .top-5 span:last-child {
  //color: blue;
}
.section .h4 {
  font-size: 14px;
  text-indent: 30px;

  .pushCart{
    display: inline-block;
    float: right;
    margin-right: 25px;
    color: cornflowerblue;
    font-size: 14px;

    &:hover{
      color: rgb(60,133,39);
      cursor: pointer;
    }
  }
}
.section .top-6 {
  display: flex;
  margin-left: 50px;
  margin-top: 15px; }
.section .top-6 p {
  width: 100px;
  height: 25px;
  border: 2px solid #E3E4E5;
  font-size: 13px;
  line-height: 25px;
  text-align: center;
  color: dimgray;
  margin: 5px; }
.section .top-6 p:last-child {
  border: 2px solid rgb(60, 133, 39);
  display: flex;
  justify-content: space-around;
  align-items: center; }
.section .top-6 p:last-child span {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: rgb(60, 133, 39);
  color: white;
  font-size: 10px;
  line-height: 22px;
  text-align: center;
  margin-right: 10px;
  margin-left: -11px;
}
.section .hh1 {
  width: 95.5%;
  height: 1px;
  margin: 15px 30px;
  background: #E3E4E5; }
.section .top_1 {
  width: 1300px;
  height: 300px;
  margin-left: 30px;
  margin-top: 10px; }
.section .top_1 .to_left {
  width: 500px;
  height: 300px;
  background: rgb(235, 235, 235);
  float: left;
  padding-left: 23px; }
.section .top_1 .to_left > * {
  margin: 2px 0; }
.section .top_1 .to_left h5 {
  margin: 15px 10px 15px 0px;
  font-size: 14px;
  color: #666666; }
.section .top_1 .to_left h5 .peisong {
  font-size: 14px; }
.section .top_1 .to_left h5 .dui {
  padding-left: 200px;
  color: #4f9dd0;
  font-size: 12px; }
.section .top_1 .to_left h5 .dui img {
  width: 15px;
  height: 15px;
  margin: 2px 0px 0px 0px; }
.section .top_1 .to_left .box {
  width: 135px;
  height: 27px;
  border: 2px solid rgb(60, 133, 39);
  line-height: 27px;
  font-size: 12px;
  text-align: center;
  color: dimgray;
  margin-bottom: 20px; }
.section .top_1 .to_left .til {
  color: #A9A9A9;
  font-size: 14px; }
.section .top_1 .to_left .con {
  margin-top: 10px;
  font-size: 14px;
  color: #666; }
.section .top_1 .to_left hr {
  color: #F6F6F6;
  width: 90%;
  text-align: center;
  margin-top: 3px; }
.section .top_1 .to_left .biao a {
  margin-right: 30px;
  display: inline-block;
  float: right;
  font-size: 14px;
  color: #0081c6;

  &:hover{
    cursor: pointer;
    color: rgb(60,133,39);
  }
}
.section .top_1 .to_left .nul {
  display: block;
  margin-top: 10px;
  color: rgb(153,153,153);
  font-size: 14px;
  //padding-left: 92px;
}
.section .top_1 .to_left .kg {
  font-size: 14px;
  color: #A9A9A9; }
.section .top_1 .to_left .kg span {
  color: #A9A9A9;
  font-size: 14px; }
.section .top_1 .to_left .updata-1 {
  width: 210px;
  height: 25px;
  line-height: 30px;
  margin-left: 100px;
  margin-top: 2px;
  margin-bottom: 5px;
  border: 1px #edd28b solid;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center; }
.section .top_1 .to_left .updata-1 span {
  font-size: 12px;
  color: #0000FF; }
.section .top_1 .to_left .hh1 {
  width: 94%;
  height: 1px;
  background-color: rgb(220, 220, 220);
  margin-top: 10px;
  margin-bottom: 10px;
}
.section .top_1 .to_left .updata-2 {
  width: 455px;
  height: 40px;
  line-height: 38px;
  border: 1px #E3E4E5 solid;
  margin-bottom: 5px;
  background-color: rgb(248,244,255);
  margin-top: 20px; }
.section .top_1 .to_left .updata-2 span {
  color: #9c64cc;
  font-size: 14px;
  margin-left: 20px;
}
.section .top_1 .to_left .updata-2 img {
  float: left; }
.section .top_1 .to_right {
  width: 740px;
  height: 300px;
  //background: rgba(60,133,39,0.5);
  float: left;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(220,220,220);
}
.section .top_1 .to_right h5 {
  margin: 10px;
  font-size: 12px;
  color: #666666; }
.section .top_1 .to_right div {
  display: flex;
  margin-left: 10px; }
.section .top_1 .to_right div button {
  color: snow;
  background: red;
  border: none;
  font-size: 12px;
  padding: 1px 2.5px; }
.section .top_1 .to_right div span {
  font-size: 14px;
  color: #666666;
  //margin-left: 5px;
}
.section .top_1 .to_right .yun1 .yun {
  width: 90px;
  height: 90px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.section .top_1 .to_right .yun1 .mi {
  display: flex;
  flex-direction: column; }
.section .top_1 .to_right .yun1 .mi p {
  color: #666;
  font-size: 14px;
  margin: 5px; }
.section .top_1 .to_right .yun1 .mi .tui-1 {
  color: #6679B3; }
.section .top_1 .to_right .yun1 .mi .tui-1 img {
  margin-right: 5px; }
.section .top_1 .to_right .yun1 .mi span {
  //margin-left: 30px;
}
.section .top_1 .to_right p {
  font-size: 14px;
  margin: 10px; }
.section .top_1 .to_right p .money {
  font-size: 12px;
  font-weight: bold;
  margin-left: 400px;
  color: red; }
.section .top_1 .to_right img {
  float: left; }
.section .bto {
  width: 1300px;
  margin-top: 30px;
  //float: left;
}
.section .bto .hh2 {
  width: 96.5%;
  margin: 10px auto;
  height: 1px;
  background: #E3E4E5; }
.section .bto h4 {
  margin: 20px;
  font-size: 14px; }
.section .bto .float {
  float: left; }
.section .bto .float span {
  color: #333;
  font-size: 13px;
}
.section .bto .hh3 {
  width: 96.5%;
  margin: 20px auto;
  height: 1px;
  background: #E3E4E5; }
.section .bto .clear {
  clear: both;

  &:hover{
    cursor: pointer;
  }
}
.section .bto .note {

  margin-top: 10px;
  line-height: 35px;
  width: 350px;
  height: 35px;
  border: 1px solid #ddd;
  box-shadow: 0 0 3px rgb(0 0 0 / 15%);
  font-size: 13px;
}
.section .bto .note img {
  margin-left: 10px;
  margin-right: 5px;
}
.section .bto ul li {
  float: left;
  margin-left: 25px;
  font-size: 12px;
  color: #999999; }
.section .bto ul li a {
  color: blue; }
.section .bto ul li a:hover {
  color: red; }
.section .bto .hr1 {
  margin-top: 30px; }
.section .bto .red {
  color: rgb(60, 133, 39);
}
.section .bto .tuijian {
  margin-left: 30px;
  padding-top: 10px; }
.section .bto .tuijian span {
  font-size: 12px; }
.section .xia {
  width: 1270px;
  //float: left;
}
.section .xia .qian .qian_y {
  text-align: right;
  margin-top: 5px; }
.section .xia .qian .qian_y span {
  font-size: 14px;
  color: #666666; }
.section .xia .qian .qian_y .rmb {
  margin-left: 50px; }
.section .xia .yfze {
  background: #F4F4F4;
  //height: 80px;
  width: 1280px;
  margin-left: 10px;
  //margin-top: 20px;
  padding-right: 20px; }
.section .xia .yfze .yfze_a {
  text-align: right;
  margin-top: 10px; }
.section .xia .yfze .yfze_a .z {
  font-size: 14px;
  color: #666666; }
.section .xia .yfze .yfze_a .hq {
  font-size: 20px;
  font-weight: bold;
  color: red;
  margin-left: 44px; }
.section .xia .yfze .yfze_b {
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: #999999; }
.section .xia .tijiao {
  margin-left: 1130px;
  margin-top: 10px;
  text-align: center;
  background-color: rgb(60,133,39);
  border: none;
  color: white;
  font-size: 20px;
  width: 140px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 20px;

  &:hover{
    cursor: pointer;
    background-color: rgb(128,176,114);
  }
}

.headera {
  width: 100%;
  overflow: hidden;
  background: #F5F5F5; }
.headera .Logo-tu {
  width: 100%;
  background: #F5F5F5;
  height: 94px;
  text-align: center; }
.headera .Logo-tu span {
  width: 220px;
  height: 54px;
  display: inline-block;
  margin: 24px 50px; }
.headera .Logo-tu span img {
  height: 54px; }
.headera .table {
  overflow: hidden;
  width: 1215px;
  margin: 0 auto;
  border-bottom: 1px solid gainsboro;
  font-size: 12px; }
.headera .table dl {
  margin-right: 182px;
  float: left;
  margin-bottom: 20px; }
.headera .table dl dt {
  margin-top: 20px;
  font-size: 12px; }
.headera .table dl dt a {
  color: #666666; }
.headera .table dl dt a:hover {
  color: red; }
.headera .table dl dd {
  margin-top: 7px;
  font-size: 12px;
  font-size: 12px; }
.headera .table dl dd a {
  color: #666666; }
.headera .table dl dd a:hover {
  color: red; }
.headera .table .dls {
  float: left;
  margin-right: 0; }
.headera .guanyuwomen {
  width: 100%;
  overflow: hidden;
  text-align: center; }
.headera .guanyuwomen ul {
  padding: 20px;
  margin-left: 129px; }
.headera .guanyuwomen ul li {
  padding: 0 5px;
  float: left;
  font-size: 12px;
  color: gainsboro; }
.headera .guanyuwomen ul li a {
  font-size: 12px;
  color: #666666; }
.headera .guanyuwomen ul li a:hover {
  color: red; }
.headera .p1 {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
  color: gainsboro; }
.headera .p1 img {
  height: 12px;
  vertical-align: 0; }
.headera .p1 a {
  padding: 0 2px;
  font-size: 12px;
  color: #666666; }
.headera .p1 a:hover {
  color: red; }
.headera .p3 {
  margin-top: 5px;
  text-align: center; }
.headera .p3 img {
  padding: 0 5px; }

body {
  overflow-x: hidden; }

/*# sourceMappingURL=JD2.css.map */

</style>
